<template>
  <div>
    <el-dialog
      width="1000"
      custom-class="pre-dialog"
      title="参数详情"
      :visible.sync="visible"
      @close="handleClose"
    >
      <el-form ref="varietyForm" :model="form" class="add-form variety-form" :rules="rules">
        <el-row type="flex" :gutter="30">
          <el-col :span="6">
            <el-form-item label="车间" prop="cj">
              <el-select size="small" placeholder="请输入" v-model="form.cj">
                <el-option
                  v-for="item in cjOption"
                  :key="item.id"
                  :label="item['key_value']"
                  :value="item['key_value']"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="品种类型" prop="pzlx">
              <el-input
                v-model="form.pzlx"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="挡车品种系数" prop="dcpzxs">
              <el-input
                v-model="form.dcpzxs"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="落纱品种系数" prop="lspzxs">
              <el-input
                v-model="form.lspzxs"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" :gutter="30">
          <el-col :span="6">
            <el-form-item label="挡车单价系数" prop="dcdjxs">
              <el-input
                v-model="form.dcdjxs"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="落纱单价系数" prop="lsdjxs">
              <el-input
                v-model="form.lsdjxs"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="品种" prop="pz">
              <el-input
                v-model="form.pz"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="支数" prop="zs">
              <el-input
                v-model="form.zs"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" :gutter="30">
          <el-col :span="6">
            <el-form-item label="挡车标准看台数" prop="dcbzkts">
              <el-input
                v-model="form.dcbzkts"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="落纱标准看台数" prop="lsbzkts">
              <el-input
                v-model="form.lsbzkts"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="品种公定量(G/100M)" prop="pzgdl">
              <el-input
                v-model="form.pzgdl"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="长度/台班(百米)/12小时" prop="cdtb12">
              <el-input
                v-model="form.cdtb12"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" :gutter="30">
          <el-col :span="6">
            <el-form-item label="定额产量516/日" prop="decl">
              <el-input
                v-model="form.decl"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实际落纱次数/天" prop="sjlscs">
              <el-input
                v-model="form.sjlscs"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="挡车单价(元/百米)" prop="dcdj">
              <el-input
                v-model="form.dcdj"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="挡车计时工资(8小时)" prop="dcjsgz8">
              <el-input
                v-model="form.dcjsgz8"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" :gutter="30">
          <el-col :span="6">
            <el-form-item label="落纱单价(元/百米)" prop="lsdj">
              <el-input
                v-model="form.lsdj"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="落纱计时工资(8小时)" prop="lsjsgz8">
              <el-input
                v-model="form.lsjsgz8"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="落纱清洁单价(元/台)" prop="lsqjdj">
              <el-input
                v-model="form.lsqjdj"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="落纱单价(次)" prop="lsdjCs">
              <el-input
                v-model="form.lsdjCs"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" :gutter="30">
          <el-col :span="6">
            <el-form-item label="换纱单价(锭)" prop="hsdj">
              <el-input
                v-model="form.hsdj"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="摆管单价(元/台)" prop="bgdj">
              <el-input
                v-model="form.bgdj"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="推细纱单价(元/台) " prop="txsdj">
              <el-input
                v-model="form.txsdj"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="挡车是否计件" prop="dcsfjj">
              <el-input
                v-model="form.dcsfjj"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="30">
          <el-col :span="6">
            <el-form-item label="落纱是否计件" prop="lssfjj">
              <el-input
                v-model="form.lssfjj"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="挡车单价(元/百米)原方案" prop="dcdjYfa">
              <el-input
                v-model="form.dcdjYfa"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="落纱单价(元/百米)原方案" prop="lsdjYfa">
              <el-input
                v-model="form.lsdjYfa"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="落纱清洁单价(元/台)原方案" prop="lsqjdjYfa">
              <el-input
                v-model="form.lsqjdjYfa"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="30">
          <el-col :span="6">
            <el-form-item label="落纱单价(次)原方案" prop="lsdjYfa">
              <el-input
                v-model="form.lsdjYfa"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="换纱单价(锭)原方案" prop="hsdjYfa">
              <el-input
                v-model="form.hsdjYfa"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="摆管单价(元/台)原方案" prop="bgdjYfa">
              <el-input
                v-model="form.bgdjYfa"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="推细纱单价(元/台)原方案" prop="txsdjYfa">
              <el-input
                v-model="form.txsdjYfa"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" :gutter="30">
          <el-col :span="6">
            <el-form-item label="车号" prop="ch">
              <el-input
                v-model="form.ch"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="锭数" prop="ds">
              <el-input
                v-model="form.ds"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="机台系数" prop="jtxs">
              <el-input
                v-model="form.jtxs"
                type="text"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="btn-list" style="justify-content: space-between">
        <div >
          <el-button v-if="form.id>0" @click="onDel" plain style="border-color: red; color: red"
            >删除</el-button
          >
        </div>
        <div>
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="addPlan">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addVarietyParameters ,deleteVarietyParameters} from '@/api/salaryReport';
export default {
  data() {
    return {
      visible: false,
      form: {
        id: 0,
        bgdj: "",
        bgdjYfa: "",
        cdtb12: "",
        ch: "",
        cj: "",
        dcbzkts: "",
        dcdj: "",
        dcdjYfa: "",
        dcdjxs: "",
        dcjsgz8: "",
        dcpzxs: "",
        dcsfjj: "",
        decl: "",
        ds: "",
        hsdj: "",
        hsdjYfa: "",
        jtxs: "",
        lsbzkts: "",
        lsdj: "",
        lsdjCs: "",
        lsdjCsYfa: "",
        lsdjYfa: "",
        lsdjxs: "",
        lsjsgz8: "",
        lspzxs: "",
        lsqjdj: "",
        lsqjdjYfa: "",
        lssfjj: "",
        pz: "",
        pzgdl: "",
        pzlx: "",
        sjlscs: "",
        txsdj: "",
        txsdjYfa: "",
        zs: ""
      },
      rules: {
        cj: [
          { required: true, message: '请选择车间', trigger: 'change' }
        ]
      },
    };
  },
  computed: {
    orderOption() {
      return this.$store.getters.orderTypeOption;
    },
    pzOption() {
      return this.$store.getters.pzOption;
    },
    cjOption() {
      return this.$store.getters.cjOption;
    },
    branchOption() {
      return this.$store.getters.branchOption;
    },
  },
  methods: {
    show() {
      this.form = {
        id:0
      }
     
      this.visible = true;
    },
    edit(data){
      this.form = data
      this.visible = true
    },
    async addPlan() {
      console.log(this.form);
       this.$refs['varietyForm'].validate(async valid => {
        if (valid) {
          let cmd = 'addVarietyParameters'
          let msg = '添加成功'
          if(this.form.id > 0){
            cmd = 'updateVarietyParameters'  
            msg = '修改成功'
          }
          const res = await addVarietyParameters(cmd,this.form);
        
          if (res.code == 1) {
            this.$message.success(msg);
            this.handleClose();
            this.$emit('update');
          }
        }
       })
      
    },
    onDel(){
      this.$confirm('是否确认删除该公定参数?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteVarietyParameters({
          idList: [this.form.id]
        });
        if (res.code == 1) {
          this.$message({
            message: '删除成功',
            iconClass: 'el-icon-success',
            customClass: 'common-message'
          });
          this.handleClose()
          this.$emit('update');
        }
      });
    },
    handleClose() {
      this.form = {};
      this.$refs['varietyForm'].resetFields()
      this.visible = false;
      this.$emit('close');
    },
  },
};
</script>
<style lang="scss">
@import '~@/assets/css/preplan.scss';
</style>
<style lang="scss" scoped>
.title {
  font-size: 12px;
  font-weight: 600;
  color: #182236;
}
.checkbox {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  ::v-deep .el-checkbox__label {
    font-size: 14px;
    color: #4a576c;
  }
  .el-checkbox {
    margin-bottom: 15px;
  }
}
::v-deep.arrangement {
  margin-bottom: 10px;
  .el-radio {
    padding: 6px 20px 0 20px;
    margin: 0 15px 0 0 !important;
  }
  .el-radio.is-bordered.is-checked {
    border-color: #2c67f6;
    position: relative;
    &::after {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      width: 22px;
      height: 20px;
      background: url('~@/assets/img/checked.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .el-radio__input.is-checked + .el-radio__label {
    color: #2c67f6;
  }
  .el-radio__label {
    padding: 0;
  }
  .el-radio__input {
    display: none;
  }
}
.pre-dialog.el-dialog .el-dialog__body .add-form .el-form-item {
  margin-bottom: 6px;
}
::v-deep.el-date-editor.el-input,
::v-deep.el-date-editor.el-input__inner {
  width: 100%;
}
.variety-form {
  ::v-deep.el-form-item__error{
    padding-top: 0;
  }
}

</style>
